<template>
  <div>
    <input type="text" v-model="msg">
    <button @click="btnChange">
      data变化查看watch的情况
    </button>
    <el-button type="primary" @click="changeArr">
      监听数组变化
    </el-button>
    <ul>
      <li v-for="item in arr">
        {{item.a}}
      </li>
    </ul>
  </div>
</template>

<script>

  import {requestOnce} from "../utils/requestTask";
  import {getList, getUser} from "../api/users";
  import Vue from 'vue';

  export default {
    name: "Request",
    data() {
      return {
        msg: '123',
        res: {
          a: {
            b: 10
          }
        },
        arr: [{a: 1}, {a: 2}, {a: 3}]
      }
    },
    created() {

      // getUser().then(res => console.log(res)).catch(e => console.log(e));

      requestOnce(getUser, {}, 3000, 4).then(res => {
        console.log(res);
      }).catch(e => {
        console.log(e)
      });
    },
    methods: {
      btnChange() {
        // this.res = {a: 10};// 第一层
        this.res.a = {b: 30}
      },
      changeArr() {
        // this.arr.push({a:10})
        // this.arr[1]= {a: 200}

        // this.$set(this.arr, 1, {a: 200});
        Vue.set(this.arr, 1, {a: 200}) // this.$set 是Vue.set的别名

      }
    },
    activated() {
      // keep-alive
      console.log('activated')
      this.msg = '456';

    },
    deactivated() {
      // keep-alive

    },
    watch: {
      'res': {
        handler: function () {
          console.log('watch 走了');
        },
        deep: true // 深监听
      }
    }

  }
</script>

<style scoped>

</style>
